<script setup>
import {getQuestionApi} from "@/api/question.js";
import {computed, onMounted, ref} from "vue";
import Answer from "@/views/main/quiz/Answer.vue";

// 返回按钮点击事件
const clickReturn = () => {
  window.location.href = '/quiz';
}

// 问题列表
const questionList = ref([]);
// 列表下表
const questionIndex = ref(0);
// 当前问题
const curQuestion = ref({
  questionId: '',
  questionName: '',
  content: '',
  picture: '',
  answers: '',
  ranswer: '',
});

// 获取问题
const getQuestion = async () => {
  const res = await getQuestionApi();
  questionList.value = res.data;
  questionIndex.value = 0;
  curQuestion.value = questionList.value[0];
}

// 存储用户选择的答案的响应式变量
const userAnswer = ref('');

// 计算属性获取选项
const choices = computed(() => {
  if (curQuestion.value.answers) {
    return curQuestion.value.answers.split('；');
  } else {
    return [];
  }
})


// 答案页面展示
const answerShow = ref(false);
// 子组件传递 下一题按钮点击事件
const nextQue = () => {
  answerShow.value = false;
  questionIndex.value++;
  curQuestion.value = questionList.value[questionIndex.value];
}

onMounted(() => {
  getQuestion();
})
</script>

<template>
  <div class="index-view">
    <button class="return_btn" @click="clickReturn">
      <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
        <path
            d="M586.4 690.5c-6.4 0-12.8-2.4-17.7-7.3L426.1 540.5c-14.3-14.3-14.3-37.6 0-51.9l142.7-142.7c9.8-9.8 25.6-9.8 35.3 0 9.8 9.7 9.8 25.6 0 35.3L470.8 514.5l133.3 133.3c9.8 9.8 9.8 25.6 0 35.3-4.9 4.9-11.3 7.4-17.7 7.4z">
        </path>
      </svg>
    </button>
    <div class="question">
      <div class="question_title">
        <p>{{ curQuestion.questionName }}</p>
      </div>
      <div class="question_choice">
        <div class="choice" v-for="item in choices">
          <button @click="userAnswer = item;answerShow=true">{{ item }}</button>
        </div>
      </div>
    </div>
  </div>
  <answer v-if="answerShow" :question="curQuestion" :user-answer="userAnswer" @continue="nextQue"/>
</template>

<style scoped lang="scss">
.index-view {
  width: 100%;
  min-height: 100vh;
  padding-bottom: 50px;
  background-color: var(--cx-color2);
  position: relative;

  .return_btn {
    margin-top: 20px;
    margin-left: 20px;
    background-color: transparent;
    border: none;
    cursor: pointer;

    svg {
      width: 50px;
      height: 50px;
      color: #3b0f0b;
    }
  }

  .question {
    margin-top: 30px;
    padding: 0 40px;
    width: 100%;

    .question_title {
      width: 100%;
      min-height: 300px;
      border: 3px solid var(--cx-color1);
      border-radius: 14px;
      background-color: white;
      position: relative;

      p {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 30px;
        letter-spacing: 5px;
        color: var(--cx-color2);
      }
    }

    .question_choice {
      width: 100%;
      margin-top: 80px;
      display: flex;
      flex-wrap: wrap;
      row-gap: 50px;

      .choice {
        width: 50%;
        text-align: center;

        button {
          width: 210px;
          height: 50px;
          background-color: var(--cx-color3);
          color: white;
          border-radius: 100px;
          border: none;
          font-size: 18px;
          letter-spacing: 3px;
          font-weight: bold;
          cursor: pointer;
        }
      }
    }
  }
}
</style>